import React, { Component } from "react";
import { Menu } from "antd";
import MenuData from "../utils/menus";
import { MyIcon } from "../utils";
import { Link } from 'react-router-dom'

const SubMenu = Menu.SubMenu;

class Sider extends Component {
  render() {
    const { menus } = MenuData;
    console.log(menus);
    return (
      <Menu theme="dark" mode="inline">
        {menus.map(menu => {
          return (
            <SubMenu
              key={menu.key}
              title={
                <span>
                  <MyIcon type={menu.icon} />
                  <span>{menu.name}</span>
                </span>
              }
            >
              {menu.children && menu.children.length > 0 && menu.children.map(child => {
                console.log(child.name)
                return (
                  <Menu.Item key={child.key}>
                    <Link to={child.path}><MyIcon type="icon-bars" /><b>{child.name}</b></Link>
                  </Menu.Item>
                )
              })}
            </SubMenu>  
          );
        })}
      </Menu>
    );
  }
}

export default Sider;
